<template>
    <div class="user-info-page">
        <el-card>
            <div class="header-title">用户信息</div>
            <div class="user-info">
                <div class="avatar">
                    <el-upload class="user-avatar-uploader" action="#" :show-file-list="false"
                        :before-upload="beforeUserAvatarUpload" :http-request="handleUserAvatarUpload">
                        <img :src="avatar" class="user-avatar" />
                    </el-upload>
                </div>
                <div class="user-info-form">
                    <el-form label-width="100px" :model="userInfo" class="demo-ruleForm">
                        <el-form-item label="昵称:">
                            <el-input v-model="userInfo.nickName" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="电话:">
                            <el-input v-model="userInfo.phone" :maxlength="11" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱:">
                            <el-input v-model="userInfo.email" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="地址:">
                            <el-input v-model="userInfo.address" type="textarea" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit(true)">提交</el-button>
                        </el-form-item>
                    </el-form>

                </div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
// -------------------------------------------------导入相关引用-------------------------------------------------
import { onMounted, ref } from 'vue';
import { ElMessage, type UploadRequestOptions } from 'element-plus';
import { getInfo, editInfo, type DataInfo } from '@/api/system/SysUser'
import { uploadFile } from '@/api/communal';
import userStore from '@/store/user';
// -------------------------------------------------相关参数定义-------------------------------------------------
const userInfo = ref<DataInfo>(
    {
        id: null,
        username: '',
        password: '',
        nickName: '',
        phone: '',
        email: '',
        address: '',
        profilePicture: ''
    }
)

const avatar = ref('')
const baseApi = process.env.VUE_APP_BASE_API

// -------------------------------------------------事件相关定义-------------------------------------------------
onMounted(() => {
    getInfoApi();
})
// -------------------------------------------------操作方法定义-------------------------------------------------
const getInfoApi = () => {
    getInfo(userStore.state.userInfo.id).then((res) => {
        if (res.data.code === 200) {
            userInfo.value = res.data.data
            avatar.value = userInfo.value.profilePicture ? baseApi + userInfo.value.profilePicture : require('@/assets/images/avatar.png');
            console.log(userInfo.value)
        }
    })
}

const onSubmit = (message: Boolean) => {
    editInfo(userInfo.value).then((res) => {
        if (res.data.code === 200) {
            if (message) {
                ElMessage.success("操作成功！")
            }
            getInfoApi()
        }
    })
}


/**
 * 文件上传
 * @param options 文件信息
 */
const handleUserAvatarUpload = (options: UploadRequestOptions) => {
    const formData = new FormData();
    formData.append("file", options.file, options.file.name)
    formData.append("currentDir", "userAvatar");
    uploadFile(formData).then((res) => {
        if (res.data.code === 200) {
            userInfo.value.profilePicture = res.data.data.fileUrl;
            avatar.value = baseApi + res.data.data.fileUrl
            ElMessage.success({
                message: '头像上传成功',
                type: 'success'
            })
            onSubmit(false)
        }
    })
}

/**
 * 文件上传之前
 * @param file 文件
 */
const beforeUserAvatarUpload = (file: any) => {
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!file.type.includes('image')) {
        ElMessage.error('上传头像只能是图片格式!');
        return false;
    }
    if (!isLt1M) {
        ElMessage.error('上传头像图片大小不能超过1MB!');
        return false;
    }
}
// -------------------------------------------------实体类定义区-------------------------------------------------
</script>
<style lang="scss" scoped>
.user-info-page {
    width: 100%;
    height: 100%;

    .el-card {
        width: 100%;
        height: 600px;
    }

    .header-title {
        margin: 20px 0;
        font-size: 26px;
        font-weight: 600;
        color: #333;
        line-height: 1;
    }

    .user-info {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .avatar {
            width: 30%;
            height: 100%;

            .user-avatar-uploader .user-avatar {
                width: 280px;
                height: 280px;
                display: block;
            }
        }

        .user-info-form {
            width: 70%;
            height: 100%;
        }
    }
}
</style>